<template>
	<div>
		<!-- 审批弹窗 -->
    <el-dialog 
      title="相关方名录审批"
      append-to-body
      :visible.sync="approveDialog"
      :close-on-click-modal="false" 
      :before-close="closeApproveDialog"
      width="60%"
      class="related_party_approve_dialog"
    >

      <!-- 内容 -->
      <avue-form 
        ref="approveForm" 
        v-model="approveObj" 
        :option="approveOption" 
        @submit="confirmApproveRelatedParty"
      >

        <!-- 营业执照表单自定义 -->
        <template slot="yyzz">
          <div class="yyzz_content">
            <span v-if="spyyzzFileList === undefined || spyyzzFileList.length === 0">-</span>
            <el-tag
              v-for="(item, index) in spyyzzFileList"
              :key="index"
              type="info"
            >
              <img
                :src="item.response.data.fileUrl"
                @click="previewYYZZ(item)"
                alt
              />
            </el-tag>
          </div>
        </template>

        <!-- 资质证书表单自定义 -->
        <template slot="cbszzzs">
          <div class="zzzs_content">
            <span v-if="spzzzsFileList === undefined || spzzzsFileList.length === 0">-</span>
            <el-tag
              v-for="(item, index) in spzzzsFileList"
              :key="index"
              type="info"
            >
              <img
                :src="item.response.data.fileUrl"
                @click="previewYYZZ(item)"
                alt
              />
            </el-tag>
          </div>
        </template>

        <!-- 附件表单自定义 -->
        <template slot="fj">
          <div>
            <span v-if="spfjFileList === undefined || spfjFileList.length === 0">-</span>
            <a
              v-else
              v-for="(item, index) in spfjFileList"
              :key="index"
              :href="downloadHead + item.response.data.id"
              style="color:#409EFF"
            >
              <i class="el-icon-download" style="margin-right:5px;"></i>下载文件（{{ item.name }}）
            </a>
          </div>
        </template>

        <!-- 按钮自定义 -->
        <template slot="menuForm">
          <el-button 
            size="small"
            icon="el-icon-close"
            @click="closeApproveDialog()">
            取 消
          </el-button>
        </template>

      </avue-form>

    </el-dialog>
	</div>
</template>

<script>
import { getDetail, approveRelatedParty } from "@/api/basedata/interestedpartymange/relatedparty";

export default {
  props: {
    approveDialog: {default: false},
    approvePartyId: {default: ""}
  },
  data() {
    return {
      approveObj: {},
      spyyzzFileList: [],
      spzzzsFileList: [],
      spfjFileList: []
    }
  },
  watch: {
    approveDialog(){
      if(this.approveDialog === true){
        this.initData();
      }
    }
  },
  computed: {
    approveOption() {
      return {
        size: "small",
        submitText: "审 批",
        mockBtn: false,
        printBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "单位名称",
            prop: "dwmc",
            disabled: true,
            rules: [{
              required: true,
              message: "请输入单位名称",
              trigger: "blur"
            }]
          },
          {
            label: "单位性质",
            prop: "dwxz",
            disabled: true
          },
          {
            label: "单位类别",
            prop: "cbxlb",
            disabled: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=contractor_category",
            props: {
              label: "dictValue",
              value: "dictKey",
            }
          },
          {
            label: "作业类型",
            prop: "cbslx",
            disabled: true,
            type: "select",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=type_of_contractor",
            props: {
              label: "dictValue",
              value: "dictKey",
            }
          },
          {
            label: "资格证书编号",
            prop: "zgzsbh",
            disabled: true
          },
          {
            label: "资质证书到期日期",
            prop: "zgzsdqrq",
            disabled: true,
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          {
            label: "承包商电话",
            prop: "cbsdh",
            disabled: true
          },
          {
            label: "邮箱",
            prop: "yx",
            disabled: true
          },
          {
            label: "联系人",
            prop: "xlr",
            disabled: true
          },
          {
            label: "法人代表",
            prop: "frdb",
            disabled: true
          },
          {
            label: "联系电话",
            prop: "lxdh",
            disabled: true
          },
          {
            label: "经营范围",
            prop: "jyfw",
            disabled: true,
            type: "textarea",
            span: 24,
            maxlength: 150,
          },
          {
            label: "营业执照",
            prop: "yyzz",
            disabled: true,
            slot: true,
            formslot: true
          },
          {
            label: "资质证书",
            prop: "cbszzzs",
            disabled: true,
            slot: true,
            formslot: true
          },
          {
            label: "附件",
            prop: "fj",
            disabled: true,
            slot: true,
            formslot: true
          },
          {
            label: "是否通过",
            prop: "passed",
            span: 24,
            type: "radio",
            dicData: [{
              label: "通过",
              value: 1
            }, {
              label: "不通过",
              value: 0
            }],
            rules: [{
              required: true,
              message: "请选择是否通过",
              trigger: "change"
            }]
          },
          {
            label: "审批意见",
            prop: "spyj",
            type: "textarea",
            span: 24,
            maxlength: 150,
          }
        ]
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    // 初始化数据
    initData() {
      this.getRelatedPartyDetail();
    },

    // 获取相关方单位详情
    getRelatedPartyDetail() {
      this.spyyzzFileList = [];
      this.spzzzsFileList = [];
      this.spfjFileList = [];
      getDetail(this.approvePartyId).then(res => {
        var resData = res.data.data;
        this.approveObj = this.formatApproveObj(resData);
        if (resData.yyzz && resData.yyzzFile && JSON.stringify(resData.yyzzFile) !== "{}") {
          this.spyyzzFileList.push({
            name: resData.yyzzFile.fileName,
            response: {
              code: 200,
              msg: "操作成功",
              success: true,
              data: resData.yyzzFile
            }
          });
        }
        if (resData.cbszzzs && resData.cbszzzsFile && JSON.stringify(resData.cbszzzsFile) !== "{}") {
          this.spzzzsFileList.push({
            name: resData.cbszzzsFile.fileName,
            response: {
              code: 200,
              msg: "操作成功",
              success: true,
              data: resData.cbszzzsFile
            }
          });
        }
        if (resData.fj && resData.fjFile && JSON.stringify(resData.fjFile) !== "{}") {
          this.spfjFileList.push({
            name: resData.fjFile.fileName,
            response: {
              code: 200,
              msg: "操作成功",
              success: true,
              data: resData.fjFile
            }
          });
        }
      });
    },

    // 获取审批弹窗数据
    formatApproveObj(row) {
      var data = {};
      for(var key in row) {
        data[key] = row[key];
      }
      data["passed"] = "";
      data["spyj"] = "";
      return data;
    },

    // 关闭、取消审批弹窗
    closeApproveDialog() {
      this.$emit('closeApproveDialog');
    },

    // 确认审批
    confirmApproveRelatedParty() {
      this.$refs.approveForm.validate((vaild,done)=>{
        if(vaild){
          approveRelatedParty(this.approveObj.id, this.approveObj.passed, this.approveObj.spyj).then(res => {
            if(res.data.success) {
              this.$emit('confirmApproveRelatedParty');
            }
          });
          done();
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.approve_setting_footer {
  text-align: center;
  margin-top: 15px;

  .el-button {
    width: 100px;
    height: 35px;
  }
}
</style>